<template>
	<view>
		<navbar :title="title" :scrollTop="scrollY"></navbar>
		<view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-with-animation="true"
				:style="'height:' + height + 'px;'" @scroll="scroll" @scrolltolower="getMore">
				<view class="header">
					<view class="bg">
						<image :src="userInfo.bg" mode=""></image>
					</view>
					<view class="info-top">
						<view class="acea-row row-middle picTxt">
							<view class="acea-row row-middle picTxt-l">
								<view class="pictrue">
									<image :src="userInfo.avatar"></image>
								</view>
								<view class="text">
									<view class="acea-row row-middle">
										<view class="name">{{userInfo.nickname}}</view>
										<!-- <view class="gray-day">(2天前来过)</view> -->
									</view>
									<view class="acea-row row-middle address" v-if="userInfo.city">
										<image src="../static/images/location_gray.png" mode=""></image>
										<view> {{userInfo.city || ''}}</view>
									</view>
								</view>
							</view>
							<view class="picTxt-r">
								<view :class="['btn',collected==1?'qu_guan':'guan']" @click="toGzFans" v-if="!isMind">
									{{collected==1?'已关注':'+关注'}}
								</view>
								<view class="acea-row row-center row-middle">
									<view class="black-txt">粉丝<text class="gray-txt">{{fans}}</text></view>
									<view class="gray-txt">|</view>
									<view class="black-txt">关注<text class="gray-txt">{{star}}</text></view>
								</view>
							</view>
						</view>
						<view class="introduce" v-if="type=='personal'">{{userInfo.province}}</view>
						<view class="introduce" v-if="type=='merchant'">添加商家介绍，更能获得大家的关注哦!</view>
						<view class="mer-info" v-if="type=='merchant'">
							<view class="acea-row row-middle row-between item">
								<view class="label">商家名称</view>
								<view class="text">长沙商和铺科技有限公司</view>
							</view>
							<view class="acea-row row-middle row-between item">
								<view class="label">主营业务</view>
								<view class="text">酒饮美食</view>
							</view>
							<view class="acea-row row-middle row-between item">
								<view class="label">公司地址</view>
								<view class="text">湖南省长沙市岳麓区汽车西站</view>
							</view>
						</view>

					</view>
				</view>
				<nav-tab @toggle="toggleMeth"></nav-tab>
				<view class="module-box">
					<view class="acea-row row-between goods-top white-bg pd-t-b-24" style="margin-bottom: 30rpx;">
						<!-- <view class="acea-row row-middle tabs" style="width: 100%;">
							<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;" scroll-with-animation>
								<view :class="['tab',goodsTabOn==index?'tab-on':'']"
									v-for="(item,index) in categoryList" :key="index" @click="goodsTabOn=index">
									{{item.name}}
								</view>
							</scroll-view>
						</view> -->
						<!-- <nav-tab @toggle="toggleMeth"></nav-tab> -->
					</view>
					<!-- <recommend v-if="goodsTabOn==0"></recommend> -->

					<sypplyService v-if="typeSe.zs=='gyl'&&typeSe.type==6" :list='dataList'></sypplyService>
					<askSupply v-else-if="typeSe.zs=='gyl'&&typeSe.type==9" :list='dataList'></askSupply>
					<merService v-else-if="typeSe.zs=='sj'" :list='dataList'></merService>
					<unused v-else-if="typeSe.zs=='es'" :list='dataList'></unused>
					<!-- 					<view class="brand-story" v-else-if="categoryType=='pp'">
					
					</view> -->
					<div v-else>
						<view class="item" v-for="(item,idx) in dataList" :key="idx">
							<beCurrent :item="item" :isTozx="true" />
						</view>
					</div>




					<view class='loadingicon acea-row row-center row-middle' @click="getMore()">
						<!-- <text class='loading iconfont icon-jiazai' :hidden='loading'></text> -->
						{{loadTitle}}
					</view>
				</view>

			</scroll-view>
		</view>
		<view class="uni-p-b-98"></view>
		<view class="acea-row row-middle row-between footer">
			<view class="acea-row row-center-wrapper red-btn" @click="toP(userInfo.phone)">
				<image src="../static/images/bottom_03.png" mode=""></image>
				<text>{{userInfo.phone?userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2"):'暂未获取'}}</text>
			</view>
			<view class="acea-row row-center-wrapper white-btn">
				<image src="../static/images/bottom_04.png" mode=""></image>
				<text @click="toConcat(userInfo.phone)">立即沟通</text>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '../components/navbarNormal/navbarNormal.vue'
	import recommend from '../components/recommend/recommend.vue'
	import sypplyService from '@/components/listItems/sypplyService.vue'
	import merService from '@/components/listItems/merService.vue'
	import askSupply from '@/components/listItems/askSupply.vue'
	import beCurrent from '@/components/listItems/beCurrent.vue'
	import unused from '@/components/listItems/unused.vue'
	import navTab from './navTab.vue'
	import {
		getUserInfo,
		getUserInfoSingle,
		getUserUFriendFansCount,
		getCenterData,
		addUserFriend,
		delUserFriend,
	} from '@/api/user.js'
	import {
		getWhether,
		getSuppleOnList,
		getSuppleBegOnList,
		getOnMerchantListApi
	} from '@/api/api.js'
	import {
		getCategory,
	} from '@/filters/commFilter.js'
	import {
		getOnJobApi,
		getOnRecruitApi
	} from '@/api/recruit.js'
	import {
		unusedListOnline
	} from '@/api/unused.js'
	export default {
		components: {
			navbar,
			recommend,
			sypplyService,
			askSupply,
			beCurrent,
			navTab,
			unused
		},
		data() {
			return {
				title: '商家主页',
				scrollY: 0,
				scrollTop: 0,
				isLove: false,
				height: 0,
				opacity: 0,
				goodsTabOn: 0,
				goodsTab: ['商铺', '供应链', '品牌'],
				goodsList: [1, 2],
				type: 'merchant',
				userInfo: {},
				fans: 0,
				star: 0,
				gxInfo: {},
				isMind: false,
				dataList: [],
				collected: false,
				cid: '',
				page: {
					limit: 8,
					page: 1
				},
				loadTitle: '加载更多',
				categoryList: [{
					name: '商铺',
					type: 0,
				}, {
					name: '房屋',
					type: 6
				}, {
					name: '写字楼',
					type: 1,
				}, {
					name: '公寓',
					type: 2,
				}, {
					name: '厂房',
					type: 3,
				}, {
					name: '仓库',
					type: 4
				}, {
					name: '土地',
					type: 5,
				}, {
					name: '供应链',
					type: 'gyl',
				}, {
					name: '品牌',
					type: 'pp',
				}],
				typeSe: {},

			};
		},
		computed: {
			//当前的类型type

		},
		watch: {
			// goodsTabOn() {
			// 	this.page.page = 1;
			// 	this.getList()
			// }
		},
		onLoad(options) {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.windowHeight;
				}
			});
			if (options.type) {
				this.type = options.type
				if (options.type == 'merchant') {
					this.title = '商家主页'
				} else if (options.type == 'personal') {
					this.title = '个人主页'
					this.cid = options.id;
					this.isMind = options.id ? false : true;
				}
			}
			this.getUserInfoMeth()
		},
		created() {

		},
		methods: {
			toP(phone) {
				phone ? getApp().globalData.toPhone(phone, '', {
					open: 1
				}) : null
			},
			toggleMeth(item) {
				this.page.page = 1;
				this.typeSe = item;
				this.getList();
				console.log(this.typeSe)
			},
			async getList() {

				if (this.page.page == 1) {
					this.dataList = []
				}
				this.loadTitle = '加载中'

				if (this.typeSe.zs == 'gyl') { //供应链
					this.getSupplyAndSeb();
				} else if (this.typeSe.zs == 'es') { //二手
					this.getEs();
				} else if (this.typeSe.zs == 'sj') { //商家
					this.getMerchant();
				} else if (this.typeSe.zs == 'zq') { //招工求职
					this.getZq();
				} else {
					this.getBecurrent();
				}

			},
			//获取供应链
			async getSupplyAndSeb() {
				let res = this.typeSe.type == 6 ? await getSuppleOnList({
					page: this.page.page,
					uid: this.userInfo.id
				}) : await getSuppleBegOnList({
					page: this.page.page,
					uid: this.userInfo.id
				});

				this.loading = true
				if (this.page == 1) {
					this.dataList = res.data.list ? res.data.list.map(item => {
						item.imaegs = item.imaegs ? item.imaegs : this.$noImageShow;
						item.vistype = 4;
						return item;
					}) : [];
					if (this.dataList.length <= 0) {
						this.loadTitle = '暂无数据'
					} else {
						this.loadTitle = ''
					}
				} else {
					this.dataList = this.dataList.concat(res.data.list);
					if (res.data.list.length <= 0) {
						this.loadTitle = '已加载所有'
					} else {
						this.loadTitle = '加载更多'
					}
				}
			},

			//获取商铺房屋
			async getBecurrent() {
				getCenterData({
					...this.page,
					'phone': this.userInfo.phone,
					status: this.typeSe.type,
					longitude: this.$location.longitude,
					latitude: this.$location.latitude
				}).then(res => {
					console.log(res)
					res.data.list.forEach(item => {
						if (item.askrentId) {
							item.status = 3
						} else if (item.buystoreId) {
							item.status = 4
						}
					})
					this.dataListDeal(res)
				})
			},
			//获取商家服务
			async getMerchant() {
				getOnMerchantListApi({
					page: this.page.page,
					uid: this.userInfo.id
				}).then(res => {
					this.dataListDeal(res)
				})
			},
			//获取二手
			async getEs() {
				unusedListOnline({
					page: this.page.page,
				}).then(res => {
					console.log(res)
					res.data.list.forEach(item => {
						if (item.askrentId) {
							item.status = 3
						} else if (item.buystoreId) {
							item.status = 4
						}
					})
					this.dataListDeal(res)
				})
			},
			// 
			async getZq() {
				let res = this.typeSe.type == 3 ? await getOnRecruitApi({
					page: this.page.page,
					uid: this.userInfo.id
				}) : await getOnJobApi({
					page: this.page.page,
					uid: this.userInfo.id
				});
				this.dataListDeal(res)
			},
			dataListDeal(res) {
				if (res.data.list.length < 1) {
					this.loadTitle = '暂无更多'
				} else {
					this.loadTitle = '加载更多'
				}
				this.dataList = [...this.dataList, ...res.data.list]
			},
			//获取招工求职
			scroll: function(e) {
				var that = this,
					scrollY = e.detail.scrollTop < 10 ? 0 : e.detail.scrollTop;
				var opacity = scrollY / 200;
				opacity = opacity > 1 ? 1 : opacity;
				that.$set(that, 'opacity', opacity);
				that.$set(that, 'scrollY', scrollY);
			},
			//获取用户/商家信息
			async getUserInfoMeth() {
				try {
					let meth = {
						mind: getUserInfo,
						person: getUserInfoSingle
					}
					let m = '';
					if (this.type == 'personal') {
						m = this.cid ? 'person' : 'mind';
						let res = await meth[m](this.cid);
						if (res.code == 200) {
							this.userInfo = res.data
							this.getFansCount(this.userInfo.id)
							// this.getList();
							if (!this.isMind) {
								this.getCollectStatus();
							}
						}
					}
				} catch (e) {
					console.log(e)
				}
			},
			getCollectStatus() {
				if (!this.userInfo.id) {
					return;
				}
				getWhether({
					friendId: this.cid
				}).then(res => {
					if (res.code == 200) {
						this.collected = res.data.length > 0 ? true : false
					}
				})
			},
			//获取用户粉丝关注数量
			getFansCount(id) {
				console.log(id)
				getUserUFriendFansCount(id).then(res => {
					// console.log("关注",res)
					if (res.code == 200) {
						this.star = res.data.attention
						this.fans = res.data.vermicelli
					}
				})
			},
			toGzFans() {
				let that = this;
				if (this.collected) {
					uni.showModal({
						title: '提示',
						content: '确定取消关注',
						success: function(res) {
							if (res.confirm) {
								that.change()
							}
						}
					});
					return;
				}
				this.change()
			},
			async change() {
				//关注/取关
				let res;
				if (this.collected) {
					res = await delUserFriend({
						uid: this.cid
					})
				} else {
					res = await addUserFriend({
						friendId: this.cid
					});
				}
				if (res.code == 200) {
					this.collected = !this.collected;
				}
			},
			// //关注取消关注
			// toGzFans() {
			// 	const eventChannel = this.getOpenerEventChannel();
			// 	eventChannel.emit('fanss', {
			// 		info: this.gxInfo,
			// 		callback(data) {

			// 		}
			// 	});
			// },
			toConcat(phone) {
				if (!phone) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}
				console.log(phone)
				getApp().globalData.into_singleChatRoom({
					phone
				})
			},
			getMore() {
				this.page.page++;
				this.getList()
			}
		},
		onReachBottom() {
			this.getMore
		},
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 396rpx;
		background: rgba(238, 33, 45, 1);
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.info-top {
		background: #fff;
		position: relative;
		// padding: 0 30rpx;
		margin-bottom: 30rpx;

		.item {
			padding: 18rpx 30rpx;

			.label {
				width: 120rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: rgba(157, 157, 157, 1);
			}

			.text {
				width: calc(100% - 120rpx);
				font-size: 28rpx;
				font-weight: 400;
				line-height: 44rpx;
				color: rgba(34, 34, 34, 1);
			}
		}
	}

	.info::before {
		content: '';
		position: absolute;
		width: 750rpx;
		height: 40rpx;
		border-radius: 32rpx 32rpx 0 0;
		background: #fff;
		top: -40rpx;
		left: 0;
	}

	.picTxt {
		padding: 30rpx;

		.picTxt-l {
			width: calc(100% - 270rpx);

			.pictrue {
				width: 96rpx;
				height: 96rpx;
				border: 1px solid #dfdfdf;
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.text {
				margin-left: 12rpx;
				width: calc(100% - 108rpx);

				.name {
					max-width: 260rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(38, 38, 40, 1);
				}

				.gray-day {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(212, 212, 212, 1);
				}

				.address {
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(175, 175, 175, 1);

					image {
						width: 20rpx;
						height: 24rpx;
					}
				}
			}
		}

		.picTxt-r {
			width: 270rpx;

			.btn {
				width: 160rpx;
				height: 56rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 56rpx;
				margin: 0 auto;
			}

			.black-txt {
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				line-height: 46rpx;
			}

			.gray-txt {
				padding: 0 6rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(157, 157, 157, 1);
				line-height: 46rpx;
			}
		}
	}

	.introduce {
		font-size: 26rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: rgba(56, 56, 56, 1);
		padding: 30rpx;
		border-bottom: 1px solid rgba(247, 247, 247, 1);
	}

	.module-box {
		padding: 30rpx;
	}

	.brand-story {
		border-radius: 10rpx;
		background: #ffffff;
		padding: 24rpx;
		margin: 24rpx 0;
		font-size: 26rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: rgba(128, 128, 128, 1);
	}

	.goods-top {
		.tabs {
			.tab {
				display: inline-block;
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-right: 24rpx;
			}

			.tab-on {
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}
		}
	}

	.footer {
		width: 100%;
		padding: 30rpx;
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 6rpx;
		}
	}

	.white-btn {
		width: 48%;
		height: 92rpx;
		opacity: 1;
		border-radius: 10rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: #ffffff;
		text-align: center;
		color: rgba(238, 33, 45, 1);
		font-size: 32rpx;
		font-weight: 400;
		line-height: 92rpx;
	}

	.red-btn {
		// margin-left: 24rpx;
		width: 48%;
		height: 92rpx;
		opacity: 1;
		border-radius: 10rpx;
		border: 1px solid rgba(238, 33, 45, 1);
		background: rgba(238, 33, 45, 1);
		text-align: center;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 92rpx;
	}

	.guan {
		background: #EE212D !important;
		color: #fff !important;
	}

	.qu_guan {

		background: #E9E7E7 !important;
		color: #808080 !important;

	}
</style>